;(function (window) {
  const hlButton = {
    template:`<button
      class="hl-button"
      @click="handleClick"
      :disabled="buttonDisabled || loading"
      :type="nativeType"
      :style="{ 'fontSize':buttonFontSize + 'px'}"
      :class="[
        type ? 'hl-button-' + type : '',
        buttonSize ? 'hl-button-' + buttonSize : '',
        {
          'is-disabled': buttonDisabled,
          'is-loading': loading,
        }
      ]"
      >
      <i class="el-icon-loading" v-if="loading"></i>
      <i class="icon" :class="icon" v-if="icon && !loading"></i>
      <span v-if="$slots.default"><slot></slot></span>
    </button>`,
    data(){
      return {

      }
    },
    props:{
      type:{
        type:String,
        default:'default'
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      size: {
        type:String,
        default: 'small'
      },
      fontSize: {
        type:[String,Number],
        default:14
      },
      icon: {
        type: String,
        default: ''
      },
      loading: Boolean,
      disabled: Boolean,
    },
    computed:{
      buttonSize(){
        return this.size
      },
      buttonDisabled(){
        return this.disabled
      },
      buttonFontSize(){
        return this.fontSize
      }
    },
    methods:{
      handleClick(evt){
        this.$emit('on-click', evt);
      }
    }
  }

  Vue.component('hl-button',hlButton)

} (window))
